<!DOCTYPE html>
<html>
<head>
    <title>Physical Pendulums Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="850" height="450"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Global Settings ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textBaseline = 'middle';

    // --- Helper Function to draw the pivot fulcrum ---
    function drawFulcrum(x, y, size) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x - size, y + size);
        ctx.lineTo(x + size, y + size);
        ctx.closePath();
        ctx.stroke();
    }

    // --- Draw Figure (a): Full Ring Pendulum ---
    function drawFigureA() {
        const cx = 150;
        const cy = 200;
        const r_outer = 85;
        const r_inner = 75;
        const pivotY = cy - r_outer;

        // Draw the ring
        ctx.beginPath();
        ctx.arc(cx, cy, r_outer, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cx, cy, r_inner, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw pivot fulcrum
        drawFulcrum(cx, pivotY, 8);

        // Draw labels
        ctx.font = "20px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.fillText('O', cx, pivotY - 20);
        // Draw center C
        ctx.beginPath();
        ctx.arc(cx, cy, 2.5, 0, 2 * Math.PI); // Dot for C
        ctx.fill();
        ctx.fillText('C', cx + 20, cy);
        ctx.fillText('(a)', cx, 350);
    }

    // --- Draw Figure (b): Arc Segment Pendulum ---
    function drawFigureB() {
        const cx = 425; // Center of the original circle
        const cy = 220;
        const r_outer = 85;
        const r_inner = 75;
        const pivotX = cx;
        const pivotY = cy - r_outer;
        const angle = 2.0; // Radians, approx 115 degrees
        const startAngle = -Math.PI / 2 - angle / 2;
        const endAngle = -Math.PI / 2 + angle / 2;

        // Draw the arc segment shape
        ctx.beginPath();
        ctx.arc(cx, cy, r_outer, startAngle, endAngle);
        const p1x = cx + r_inner * Math.cos(endAngle);
        const p1y = cy + r_inner * Math.sin(endAngle);
        ctx.lineTo(p1x, p1y);
        ctx.arc(cx, cy, r_inner, endAngle, startAngle, true); // Draw inner arc backwards
        ctx.closePath();
        ctx.stroke();

        // Draw pivot fulcrum
        drawFulcrum(pivotX, pivotY, 8);

        // Draw labels
        ctx.font = "20px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.fillText("O'", pivotX, pivotY - 20);
        // Draw center C
        ctx.beginPath();
        ctx.arc(cx, cy, 2.5, 0, 2 * Math.PI); // Dot for C
        ctx.fill();
        ctx.fillText('C', cx + 20, cy);
        ctx.fillText('(b)', cx, 350);
    }

    // --- Draw Figure (c): Bifilar Pendulum ---
    function drawFigureC() {
        const pivotX = 700;
        const pivotY = 100;
        const cx = 700;
        const cy = 240;
        const r_outer = 85;
        const r_inner = 75;
        const angle = Math.PI / 2; // 90 degrees
        const startAngle = Math.PI / 2 - angle / 2;
        const endAngle = Math.PI / 2 + angle / 2;

        // Draw arc segment
        ctx.beginPath();
        ctx.arc(cx, cy, r_outer, startAngle, endAngle);
        const p1x_inner = cx + r_inner * Math.cos(endAngle);
        const p1y_inner = cy + r_inner * Math.sin(endAngle);
        ctx.lineTo(p1x_inner, p1y_inner);
        ctx.arc(cx, cy, r_inner, endAngle, startAngle, true);
        ctx.closePath();
        ctx.stroke();

        // Get outer arc endpoints for suspension threads
        const p1x_outer = cx + r_outer * Math.cos(startAngle);
        const p1y_outer = cy + r_outer * Math.sin(startAngle);
        const p2x_outer = cx + r_outer * Math.cos(endAngle);
        const p2y_outer = cy + r_outer * Math.sin(endAngle);

        // Draw suspension threads
        ctx.beginPath();
        ctx.moveTo(pivotX, pivotY);
        ctx.lineTo(p1x_outer, p1y_outer);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(pivotX, pivotY);
        ctx.lineTo(p2x_outer, p2y_outer);
        ctx.stroke();

        // Draw labels
        ctx.font = "20px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.fillText("O''", pivotX, pivotY - 20);
        // Draw center C
        ctx.beginPath();
        ctx.arc(cx, cy, 2.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('C', cx + 20, cy);
        ctx.fillText('(c)', cx, 350);

        // Draw "悬线" label and pointers
        ctx.font = "20px KaiTi, SimSun, sans-serif";
        ctx.textAlign = 'left';
        const labelX = 760;
        const labelY = 170;
        ctx.fillText('悬线', labelX, labelY);

        const pointerTargetX = labelX - 10;
        const pointerTargetY = labelY + 2;
        
        // Midpoint on right thread
        const rightThreadMidX = pivotX + (p1x_outer - pivotX) * 0.5;
        const rightThreadMidY = pivotY + (p1y_outer - pivotY) * 0.5;
        // Midpoint on left thread
        const leftThreadMidX = pivotX + (p2x_outer - pivotX) * 0.5;
        const leftThreadMidY = pivotY + (p2y_outer - pivotY) * 0.5;

        ctx.beginPath();
        ctx.moveTo(rightThreadMidX, rightThreadMidY);
        ctx.lineTo(pointerTargetX, pointerTargetY);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(leftThreadMidX, leftThreadMidY);
        ctx.lineTo(pointerTargetX, pointerTargetY);
        ctx.stroke();
    }


    // --- Main Drawing Function ---
    function drawAll() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        drawFigureA();
        drawFigureB();
        drawFigureC();

        // Draw main title
        ctx.font = "22px KaiTi, SimSun, sans-serif";
        ctx.textAlign = 'center';
        ctx.fillText('习题 10-12 图', canvas.width / 2, 420);
    }

    drawAll();
</script>

</body>
</html>